<div
  #autoComplete
  class="x-auto-complete"
  [class.x-flex]="justify || align || direction"
  [class.x-checked]="value"
  [class.x-disabled]="disabled"
  [class.x-required]="requiredIsEmpty"
  [class.x-invalid]="invalid"
>
  <label *ngIf="label" [style.width]="labelWidth" [ngClass]="labelMap">{{ label }}</label>
  <div class="x-auto-complete-row" (click)="showPortal()">
    <x-input
      #inputCom
      type="text"
      [icon]="icon"
      [iconSpin]="iconSpin"
      [placeholder]="placeholder"
      [required]="required"
      [disabled]="disabled"
      [(ngModel)]="value"
      (xInput)="onInput($event)"
      (xKeydown)="onKeydown($event)"
      (xFocus)="onFocus($event)"
      (xBlur)="onBlur($event)"
    ></x-input>
  </div>
</div>
